<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData?.sellerName }}
          </span>
          <el-tag size="small" type="warning">
            {{ getLabel("seller_status", formData?.sellerStatus) }}
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <template v-if="formData">
          <el-button class="main-btn" size="small" type="primary" @click="handlChange">
            变更信息
          </el-button>
        </template>
      </template>
    </header-module>

    <div style="background-color: white; padding-top: 20px">
      <el-form :inline="true" class="filter-form-inline" label-position="left" size="small">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="8" :xs="4">
            <el-form-item label="商销客户编号：">
              <span>{{ formData?.sellerNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="企业所在地区：">
              {{ formData?.provinceName }}/{{ formData?.cityName }}/{{
                formData?.areaName
              }}
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="详细地址：">
              <span>{{ formData?.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="main-content" style="margin-top: 20px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="详细信息" name="1">
          <el-form class="filter-form-inline" label-position="right" label-width="82px" size="small">
            <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
              <el-col :lg="8" :xs="4">
                <el-form-item label="统一社会信用代码：" label-width="140px">
                  <span>{{ formData?.creditCode }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="联系人：">
                  <span>{{ formData?.userName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="联系电话：">
                  <span>{{ formData?.tel }}</span>
                </el-form-item>
              </el-col>

              <el-col :lg="8" :xs="4">
                <el-form-item label="创建人："  label-width="140px">
                  <span>{{ formData?.creatorName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="创建时间：">
                  <span>{{
                    dateFormat("yyyy-mm-dd HH:MM:SS", formData?.createdAt)
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="修改记录" name="3">
          <operation-view v-if="activeName === '3'" mode="seller" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <new-com ref="newComDialog" @succsessFormSign="succsessFormSign" />
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  components: {
    newCom: defineAsyncComponent(() => import("./newCom.vue")),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      formData: {},
      activeName: "1",
      newComDialog: null,
    });

    // 返回
    const handlBack = () => {
      router.go(-1);
    };

    const handlDetail = (id) => {
      api.newComa.COMMERCIAL_DATAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data;
        }
      });
    };

    onMounted((_) => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });

    const handlChange = () => {
      data.newComDialog.open(data.formData);
    };

    const succsessFormSign = () => {
      handlDetail(route.query.id);
    };

    return {
      ...toRefs(data),
      handlBack,
      handlDetail,
      handlChange,
      succsessFormSign,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>
